<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<style>
	section {
		padding-bottom: 2rem;
		background-color: #fff;
	}
	
	header {
		background-color: #007aff;
		padding: .6rem 0;
	}
	
	header .content {
		font-size: 0;
	}
	
	header .content .block {
		display: inline-block;
		width: 30%;
		vertical-align: top;
	}
	
	header .content .left, header .content .right {
		position: relative;
		left: -6%;
		top: 3rem;
	}
	
	header .content .right {
		left: 0;
		top: 3.2rem;
	}
	
	header .content .right a {
		display: block;
	}
	
	header .content .right i {
		font-size: 2rem;
		color: #eee212;
		vertical-align: top;
	}
	
	header .content .right span {
		font-size: 1.4rem;
		color: #eee212;
		margin-left: 2px;
		line-height: 2.2rem;
	}
	
	header .content .left a {
		display: block;
		padding-left: 32%;
		width: 36%;
	}
	
	header .content .left a i {
		color: #fff;
		font-size: 2.6rem;
	}
	
	header .content .center {
		width: 40%;
		text-align: center;
		color: #fff;
	}
	
	header .content .center h1 {
		font-size: 1.8rem;
	}
	
	header .content .center .headbox {
		margin-top: 3%;
	}
	
	header .content .center .headbox img {
		width: 6rem;
		height: 6rem;
		border-radius: 50%;
		border: 2px solid #fff;
	}
	
	header .content .center .name {
		font-size: 1.6rem;
		color: #333;
		margin: 2% 0;
	}
	
	header .content .center .msg {
		font-size: 1.4rem;
		color: #fff;
	}
	
	.searchbox {
		padding: .6rem 5%;
		background-color: #f8f8f8;
	}
	
	.searchbox select {
		border: 1px solid #d1d1d1;
		border-radius: 4px;
		width: 46%;
		color: #aaa;
		text-indent: .6rem;
		padding: .4rem 0;
		font-size: 1.4rem;
	}
	
	.searchbox form {
		border: 1px solid #d1d1d1;
		border-radius: 4px;
		width: 46%;
	}
	
	.searchbox form input {
		width: 100%;
		padding: .4rem 0;
		text-indent: .6rem;
		font-size: 1.4rem;
		color: #aaa;
	}
	
	.searchbox select {
		margin-right: 8%;
	} 
	
	section .container .list .second-level {
		background-color: #fff;
	}
	
	section .container .list .second-level .info {
		padding: .8rem 5%;
		background-color: #fff;
		-webkit-align-items: center;
		align-items: center;
	}
	
	section .container .list .second-level .info .headbox img {
		width: 4.4rem;
		height: 4.4rem;
		border-radius: 50%;
	}
	
	section .container .list .second-level .info .icon i {
		font-size: 2.6rem;
		display: inline-block;
		color: #d4d4d4;
	}
	
	section .container .list .second-level .userinfo {
		text-indent: 1rem;
		font-size: 1.2rem;
		color: #333;
		line-height: 1.8rem;
	}
	
	section .container .list .second-level .price {
		font-size: 1.2rem;
		color: #afafaf;
		line-height: 1.8rem;
	}
	
	section .container .list li.second-level .second-level-hide {
		width: 95%;
		margin: .6rem auto;
		border-radius: 5px;
		background-color: #fff;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper p.title {
		padding: .2rem 2%;
		background-color: #f3f3f3;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content {
		background-color: #fff;
		padding-left: .2rem;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .detailed {
		padding: .8rem 0;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .detailed span.text {
		color: #888;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .team {
		padding: .6rem 2%;
	    background-color: #fff;
	    -webkit-align-items: center;
	    align-items: center;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .team .headbox img {
	    width: 4rem;
	    height: 4rem;
	    border-radius: 50%;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .team .userinfo {
		text-indent: .8rem;
	    font-size: 1rem;
	    color: #333;
	    line-height: 1.6rem;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .team .price {
	    font-size: 1rem;
	    color: #afafaf;
	    line-height: 1.6rem;
	}
	
	section .container .list li.second-level .second-level-hide .content-wrapper .content .team .icon i {
		font-size: 2.2rem;
		display: inline-block;
		color: #d4d4d4;
	}
	
	section .container .list li.second-level .hide {
		margin-top: 0;
	    margin-bottom: 0;
	}
	
	.hide {
		height: 0;
	    overflow: hidden;
	    margin-top: 0;
	    margin-bottom: 0;
	}
	
	i.iconfont.rotate {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	section .loadbox {
		padding-top: 2rem;
		text-align: center;
	}
	
</style>

<script src="/assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
	
	<!-- header start -->
	<header>
		<div class="content">
			<div class="block left"><a href="javascript:;" id="return" class="return"><i class="iconfont">&#xe600;</i></a></div>
			<div class="block center">
				<h1>我的团队</h1>
				<div class="headbox">
					<img src="#(user.headPhoto??'/assets/img/defaultHead.jpg')" />
				</div>
				<p class="name">#(user.userName)</p>
				<p class="msg" id="mytotalAmount" data-totalAmount="#(user.totalAmount)"></p>
<!-- 				<p class="msg">我的佣金：#(user.totalAmount)</p> -->
			</div>
			<div class="block right">
				<a href="javascript:;">
					<i class="iconfont">&#xe6e0;</i>
					<span>消息通知</span>
				</a>
			</div>
		</div>
	</header>
	<!-- end header -->
	#@loadContainer()
	<div class="searchbox flexbox">
		<select id="sort">
			<option value="">请选择</option>
			<option value="1">总单量从低到高</option>
			<option value="2">总单量从高到低</option>
			<option value="3">总金额从低到高</option>
			<option value="4">总金额从高到低</option>
		</select>
		<form action="#" onsubmit="return false">
			<input id="search" type="search" autocomplete="off" placeholder="搜索"  />
		</form>
	</div>
	<section id="app" class="visiblecon sectrans" data-load="true" data-page="1">
		<div class="container">
			<ul class="list" id="ulcon"></ul>
		</div>
	</section>

	<!-- footer start -->
	#--#@footer(2)--#
	<!-- end footer -->

	<script src="/assets/js/xxsg.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script>
    	$(function(){
    		var group = null,
    			contentDom = $("#app"),
        		window_h = $(window).height(),
        		ulDom = $("#ulcon")
        		
    		axios.get("/userCenter/getMyGroup")
    		.then(function(res){
    			console.log(res.data)
    			group = res.data
    			getBaseTab(group,showSuc)
    			init(group)
    		})
			/*$.ajax({
                "type":"post",
                "url": "/userCenter/getMyGroup",
                "success":function(data){
                	if(_x.isEmpty(data)){//没有数据
    					showSuc();
    					return;
    					$("#nolist").fadeIn();
    				}
                	console.log(data)
                	//getBaseTab(data,showSuc);
                }
            })*/
            
			
			ulDom.on("click","li.second-level .ac",function(){
				var that = $(this),
					show = that.attr("show"),
					hideDom = that.siblings(".hide"),
					h = hideDom[0].scrollHeight 
				if(show == "true"){
					that.attr("show",false)
					if(that.hasClass("team")){
						var parent = that.parents(".hide"),
						$h = parent.outerHeight()
						parent.css("height",$h - h)
						hideDom.css({
							"height": 0
						})
					}else{
						hideDom.css({
							"height": 0,
							"margin-top": 0
						})
					}
					that.find("i.iconfont").removeClass("rotate")
				}else{
					that.attr("show",true)
					if(that.hasClass("team")){
						var parent = that.parents(".hide"),
							$h = parent.outerHeight()
						parent.css("height",$h + h)
						hideDom.css({
							"height": h
						})
					}else{
						hideDom.css({
							"height": h,
							"margin-top": ".6rem"
						})
					}
					that.find("i.iconfont").addClass("rotate")
				}
			})
            
            function getBaseTab(data,callback){
    			ulDom.parent().children(".nolist").remove()
            	if(data == null || data.length == 0){
            		if(callback)callback();
            		ulDom.parent().append("<p class='nolist' style='padding-top: 2rem;text-align: center;'>暂无团队！</p>")
            	}
            	var html = "",
            		count = 0
            	for(var i = 0;i < data.length;i++){
            		var that = data[i],
            			threeHtml = ""
            		for(var k = 0;k < that.mygroup.length;k++){
            			var three = that.mygroup[k]
            			threeHtml += "<li class='b_bor'>"+
									 "    <div class='team ac flexbox' show='false'>"+
									 "        <div class='headbox'>"+
									 "            <img src='"+ getHeadImg(three.headPhoto) +"' />"+
									 "        </div>"+
									 "        <div class='userinfo flex'>"+
									 "			<p>"+ three.userName +"</p>"+
									 "			<p>"+ formatPho(three.userPhone) +"</p>"+
									 "        </div>"+
									 "        <div class='price flex'>"+
									 "			<p>当月业绩："+ formatMoney(three.more.monthAmount) +"</p>"+
									 "			<p>总业绩："+ formatMoney(three.more.totalAmount) +"</p>"+
									 "        </div>"+
									 "        <div class='icon'>"+
									 "            <i class='iconfont trans'>&#xe61d;</i>"+
									 "        </div>"+
									 "    </div>"+
									 "    <div class='hide trans'>"+
									 "        <p class='title'>详细信息</p>"+
									 "        <div class='content'>"+
									 "            <div class='detailed b_bor'>"+
									 "					<span>成交率：</span>"+
									 "					<span>"+ (three.more.successRate / 100) +"%</span>"+
									 "				</div>"+
									 "				<div class='detailed b_bor'>"+
									 "					<span>区域：</span>"+
									 "					<span>"+ (three.cooperateArea?three.cooperateArea:'') +"</span>"+
									 "				</div>"+
									 "				<div class='detailed b_bor'>"+
									 "					<span>家庭住址：</span>"+
									 "					<span>"+ (three.census?three.census:'') +"</span>"+
									 "				</div>"+
									 "				<div class='detailed b_bor'>"+
									 "					<span>总订单量：</span>"+
									 "					<span>"+ three.more.total +"</span>"+
									 "				</div>"+
									 "				<div class='detailed b_bor'>"+
									 "					<span>成交订单量：</span>"+
									 "					<span>"+ three.more.success +"</span>"+
									 "				</div>"+
									 "				<div class='detailed b_bor'>"+
									 "					<span>逾期订单量：</span>"+
									 "					<span>"+ three.more.overdue +"</span>"+
									 "				</div>"+
									 "				<div class='detailed b_bor'>"+
									 "					<span>逾期率：</span>"+
									 "					<span>"+ three.more.overdueRate +"</span>"+
									 "				</div>"+
									 "        </div>"+
									 "    </div>"+
									 "</li>";
            		}
            		
            		if(_x.isEmpty(threeHtml))threeHtml = "<p style='padding: 1rem 0;text-align: center;'>暂无团队！</p>"
            		
					var borderCls = "b_bor"
					if(i === 0)borderCls = "t_bor b_bor"
            		html += "<li class='second-level "+ borderCls +"'>"+
							"	<div class='info flexbox ac' show='false'>"+
							"		<div class='headbox'>"+
							"			<img src='"+ getHeadImg(that.headPhoto) +"' />"+
							"		</div>"+
							"		<div class='userinfo flex'>"+
							"			<p>"+ that.userName +"</p>"+
							"			<p>"+ formatPho(that.userPhone) +"</p>"+
							"		</div>"+
							"		<div class='price flex'>"+
							"			<p>当月业绩："+ formatMoney(that.more.monthAmount) +"</p>"+
							"			<p>总业绩："+ formatMoney(that.more.totalAmount) +"</p>"+
							"		</div>"+
							"		<div class='icon'>"+
							"			<i class='iconfont trans'>&#xe61d;</i>"+
							"		</div>"+
							"	</div>"+
							"	<div class='second-level-hide trans hide'>"+
							"		<div class='detailed-wrapper content-wrapper b_bor'>"+
							"			<p class='title'>详细信息</p>"+
							"			<div class='content'>"+
							"				<div class='detailed b_bor'>"+
							"					<span>成交率：</span>"+
							"					<span>"+ (that.more.successRate / 100) +"%</span>"+
							"				</div>"+
							"				<div class='detailed b_bor'>"+
							"					<span>区域：</span>"+
							"					<span>"+ (that.cooperateArea?that.cooperateArea:'') +"</span>"+
							"				</div>"+
							"				<div class='detailed b_bor'>"+
							"					<span>家庭住址：</span>"+
							"					<span>"+ (that.census?that.census:'') +"</span>"+
							"				</div>"+
							"				<div class='detailed b_bor'>"+
							"					<span>总订单量：</span>"+
							"					<span>"+ that.more.total +"</span>"+
							"				</div>"+
							"				<div class='detailed b_bor'>"+
							"					<span>成交订单量：</span>"+
							"					<span>"+ that.more.success +"</span>"+
							"				</div>"+
							"				<div class='detailed b_bor'>"+
							"					<span>逾期订单量：</span>"+
							"					<span>"+ that.more.overdue +"</span>"+
							"				</div>"+
							"				<div class='detailed b_bor'>"+
							"					<span>逾期率：</span>"+
							"					<span>"+ that.more.overdueRate +"</span>"+
							"				</div>"+
							"			</div>"+
							"		</div>"+
							"		<div class='team-wrapper content-wrapper b_bor'>"+
							"			<p class='title'>团队</p>"+
							"			<div class='content'>"+
							"				<ul class='three-level'>"+
												threeHtml+
							"				</ul>"+
							"			</div>"+
							"		</div>"+
							"	</div>"+
							"</li>";
            		count++
            	}
            	
            	ulDom.html(html)
            	
           		if(count === data.length){
           			if(callback)callback()
           		}
			}
            
            function showSuc(){
    			$("#app").removeClass("visiblecon");
    			$("#load-container").removeClass("load7");
        	}
            
            $("#mytotalAmount").html("" + formatMoney($("#mytotalAmount").data("totalAmount")))
            
            //金额格式化
            function formatMoney(money){
            	if(_x.isEmpty(money) || money <= 0)return 0
            	
            	return (money / 10000) + "万"
            }
            
          	//手机号格式化
            function formatPho(pho){
            	if(_x.isEmpty(pho))return ""
            	
            	if(pho.length < 7){
            		return pho
            	}
            	var newPho = pho.toString(),
            		fx = newPho.substring(3,7)
            	return newPho.replace(fx,"****")
            }
          	
          	function getHeadImg(src){
          		if(_x.isEmpty(src))return "/assets/img/defaultHead.jpg"
          		return src
          	}
            
          	function init(group){
          		//搜索
              	var searchDom = $("#search"),
              		sortDom = $("#sort")
              	
              	sortDom.change(function(){
              		var val = $(this).val(),
              			searchStr = searchDom.val()
              		getBaseTab(search(group,searchStr,val))
              	})
              	
              	searchDom.parent().on("submit",function(e){
              		e.preventDefault()
              		var val = searchDom.val(),
              			sortKey = sortDom.val()
              		getBaseTab(search(group,val,sortKey),function(){
              			searchDom.blur()
              		})
              	})
              	
          	}
          	
          	function search(arr,searchStr,sort){
          		var newArr = [],
          			len = arr.length,
          			ss = deepCopy(arr)
          		if(!_x.isEmpty(searchStr)){
	          		for(var i = 0;i < len;i++){
	          			if(_x.isEmpty(ss[i].userName))continue
	          			if(ss[i].userName.indexOf(searchStr) > -1){
	          				var mygroup = []
	          				for(var k = 0;k < ss[i].mygroup.length;k++){
	          					if(_x.isEmpty(ss[i].mygroup[k].userName))continue
	          					if(ss[i].mygroup[k].userName.indexOf(searchStr) > -1){
	          						mygroup.push(ss[i].mygroup[k])
	          					}
	          				}
	          				ss[i].mygroup = mygroup
	          				newArr.push(ss[i])
	          			}else{
	          				var mygroup = []
	          				for(var k = 0;k < ss[i].mygroup.length;k++){
	          					if(_x.isEmpty(ss[i].mygroup[k].userName))continue
	          					if(ss[i].mygroup[k].userName.indexOf(searchStr) > -1){
	          						mygroup.push(ss[i].mygroup[k])
	          					}
	          				}
	          				
	          				if(mygroup.length > 0){
	          					ss[i].mygroup = mygroup
	          					newArr.push(ss[i])
	          				}
	          			}
	          		}
          		}else{
          			newArr = ss
          		}
          		return mySort(newArr,sort)
          	}
          	
          	//排序
          	function mySort(arr,key){
          		/*
          			key
          			1：日单量从低到高
        			2：日单量从高到底
          			3:总金额从低到高
          			4：总金额从高到低
          		*/
          		if(!_x.isEmpty(key)){
	          		for(var i = 0;i < arr.length;i++){
	          			arr[i].mygroup.sort(function(a,b){
	          				if(key == 1){
		          				return a.more.total - b.more.total
		          			}else if(key == 2){
		          				return b.more.total - a.more.total
		          			}else if(key == 3){
		          				return a.more.totalAmount - b.more.totalAmount
		          			}else if(key == 4){
		          				return b.more.totalAmount - a.more.totalAmount
		          			}
	          			})
	          		}
	          		
	          		arr.sort(function(a,b){
	          			if(key == 1){
	          				return a.more.total - b.more.total
	          			}else if(key == 2){
	          				return b.more.total - a.more.total
	          			}else if(key == 3){
	          				return a.more.totalAmount - b.more.totalAmount
	          			}else if(key == 4){
	          				return b.more.totalAmount - a.more.totalAmount
	          			}
	          		})
          		}
          		
          		return arr
          	}
          	
          	//对象深度拷贝
          	function deepCopy(o){
          		if(o instanceof Array){
          			var n = []
          			for(var i = 0;i < o.length;i++){
          				n[i] = deepCopy(o[i])
          			}
          			return n
          		}else if(o instanceof Object){
          			var n = {}
          			for(var i in o){
          				n[i] = deepCopy(o[i])
          			}
          			return n
          		}else{
          			return o
          		}
          	}
          	
    	});
    </script>
</body>
</html>